<!doctype html>

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>WIT120远程医疗系统</title>
  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
    }

    #videos {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 30%;
      right: 0;
      overflow: auto;
    }

    #videos .bigvideo {
      display: inline-block;
        position:absolute;
        width: 100%;
        height: 99%;
        top: 1%;
        bottom: 30%;
    }

    #videos .smallvideo {
        display: inline-block;
        position:absolute;
        width: 30%;
        bottom: 0%;
        right: 0;
        z-index:1;
    }

    #chat {
      position: absolute;
      left: 0;
      top: 70%;
      bottom: 0;
      width: 99%;
      border: 1px solid #0f0f0f;
    }
    #chat .msgIpt, #chat .fileIpt{
      position: absolute;
      left: 0;
      width: 69%;
    }
    #chat .sendBtn, #chat .sendFileBtn {
        position: absolute;
        left: 70%;
        width: 30%;
        border-radius:5px;
    }
    #chat .msgIpt,#chat .sendBtn {
      bottom: 10px;
    }
    #chat .fileIpt, #chat .sendFileBtn {
        bottom: 40px;
    }

    #chat .msgs {
      padding: 1%;
        width:99%;
        height:60%;
        overflow:auto;
        background:#4D4948;
      word-break: break-all;
      word-wrap:break-word;
    }
    #chat .msgs p{
      margin: 0.3em 0;
    }
    .receiver {
        position:relative;
        max-width:70%;
        min-width: 51%;
        top:0px;
        left:16px;
        height:auto;
        float:left;
        background:#66CCFF;
        border-radius:5px; /* 圆角 */
        margin:5px 0px 0 0;
        text-align:center;
    }
    .receiver span.rarrow {
        position:absolute;
        top:3px;
        left:-10px; /* 圆角的位置需要细心调试哦 */
        width:0;
        height:0;
        font-size:0;
        border:solid 5px;
        border-color:#4D4948 #66CCFF #4D4948 #4D4948;
    }
    .sender {
        position:relative;
        max-width:70%;
        min-width: 51%;
        top:0px;
        right:16px;
        height:auto;
        float:right;
        background:#F8C301;
        border-radius:5px; /* 圆角 */
        margin:5px 0px 0 0;;
        text-align:center;
    }
    .sender span.sarrow {
        position:absolute;
        top:3px;
        right:-10px; /* 圆角的位置需要细心调试哦 */
        width:0;
        height:0;
        font-size:0;
        border:solid 5px;
        border-color:#4D4948 #4D4948 #4D4948 #F8C301;
    }
    #files {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 20%;
    }
    #files .name {
    }
    #files .percent {
      font-weight: bold;
      text-decoration: none
    }
  </style>
</head>
<body>
  <div id="chat">
    <div class="msgs" id="msgs">

    </div>
    <input type="file" id="fileIpt" class="fileIpt">
    <button id="sendFileBtn" class="sendFileBtn">发送文件</button>
	<input type="text" id="msgIpt" class="msgIpt">
    <button id="sendBtn" class="sendBtn">发送</button>
  </div>
  <div id="videos">
    <video id="me" autoplay muted></video>
  </div>
  <div id="files">
  </div>

</body>
<script type="text/javascript" src="/SkyRTC-client.js"></script>
<script type="text/javascript">

    var g_urlre = /(https?:\/\/|ftps?:\/\/)?((\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(:[0-9]+)?|(localhost)(:[0-9]+)?|([\w]+\.)(\S+)(\w{2,4})(:[0-9]+)?)(\/?([\w#!:.?+=&%@!\-\/]+))?/ig;

    var replaceURLToLink = function (text) {
        text = text.replace(g_urlre, function (url) {
            var urlText = url;
            if (!url.match('^https?:\/\/')) {
                url = 'http://' + url;
            }
            return '<a target="_blank" href="' + urlText + '">'+urlText+"</a>";
        });
        return text;
    };

    var videos = document.getElementById("videos");
    var sendBtn = document.getElementById("sendBtn");
    var msgs = document.getElementById("msgs");
    var sendFileBtn = document.getElementById("sendFileBtn");
    var files = document.getElementById("files");
    var rtc = SkyRTC();
	var witinfo;
  /**********************************************************/



  sendBtn.onclick = function(event){
    var msgIpt = document.getElementById("msgIpt"),
        msg = msgIpt.value;
        if(msg == ""){
            return;
        }
            /*
        p = document.createElement("p");
    p.innerText = "me: " + msg;
    */
    //广播消息
    rtc.broadcast(msg);
    msgIpt.value = "";
      newE = document.createElement("div");
      newE.className = "sender";
      newE.innerHTML = "<span class=\"sarrow\"></span>"+replaceURLToLink(msg);
      msgs.appendChild(newE);
      msgs.scrollTop = msgs.scrollHeight;
  };
 
  
  document.onkeydown = function(e) {
	    var theEvent = e || window.event;  
	    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
	    var focus = document.activeElement.id; //获取当前焦点所在元素的id，关键是这句
	    if (code == 13) {
	    	document.getElementById("sendBtn").click();
	    }
	    return true;  
	}

  
  sendFileBtn.onclick = function(event){
    //分享文件
    rtc.shareFile("fileIpt");
  };
  /**********************************************************/

  

  //对方同意接收文件
  rtc.on("send_file_accepted", function(sendId, socketId, file){
    var p = document.getElementById("sf-" + sendId);
    p.innerText = "对方接收" + file.name + "文件，等待发送";

  });
  //对方拒绝接收文件
  rtc.on("send_file_refused", function(sendId, socketId, file){
    var p = document.getElementById("sf-" + sendId);
    p.innerText = "对方拒绝接收" + file.name + "文件";
  });
  //请求发送文件
  rtc.on('send_file', function(sendId, socketId, file){
    var p = document.createElement("p");
    p.innerText = "请求发送" + file.name + "文件";
    p.id = "sf-" + sendId;
    files.appendChild(p);
  });
  //文件发送成功
  rtc.on('sended_file', function(sendId, socketId, file){
    var p = document.getElementById("sf-" + sendId);
    p.parentNode.removeChild(p);
  });
  //发送文件碎片
  rtc.on('send_file_chunk', function(sendId, socketId, percent, file){
    var p = document.getElementById("sf-" + sendId);
    p.innerText = file.name + "文件正在发送: " + Math.ceil(percent) + "%";
  });
  //接受文件碎片
  rtc.on('receive_file_chunk', function(sendId, socketId, fileName, percent){
    var p = document.getElementById("rf-" + sendId);
    p.innerText = "正在接收" + fileName + "文件：" +  Math.ceil(percent) + "%";
  });
  //接收到文件
  rtc.on('receive_file', function(sendId, socketId, name){
    var p = document.getElementById("rf-" + sendId);
    p.parentNode.removeChild(p);
  });
  //发送文件时出现错误
  rtc.on('send_file_error', function(error){
    console.log(error);
  });
  //接收文件时出现错误
  rtc.on('receive_file_error', function(error){
    console.log(error);
  });
  //接受到文件发送请求
  rtc.on('receive_file_ask', function(sendId, socketId, fileName, fileSize){
    var p;
    if (window.confirm(socketId + "用户想要给你传送" + fileName + "文件，大小" + fileSize + "KB,是否接受？")) {
      rtc.sendFileAccept(sendId);
      p = document.createElement("p");
      p.innerText = "准备接收" + fileName + "文件";
      p.id = "rf-" + sendId;
      files.appendChild(p);
    } else {
      rtc.sendFileRefuse(sendId);
    }
  });
  //成功创建WebSocket连接
  rtc.on("connected", function(socket) {
    //创建本地视频流
    rtc.createStream({
      "video": true,
      "audio": true
    });
  });
  //创建本地视频流成功
  rtc.on("stream_created", function(stream) {
    document.getElementById('me').className = "bigvideo";
    document.getElementById('me').src = URL.createObjectURL(stream);
    document.getElementById('me').play();
  });
  //创建本地视频流失败
  rtc.on("stream_create_error", function() {
	  console.log("create stream failed!");
  });
  //接收到其他用户的视频流
  rtc.on('pc_add_stream', function(stream, socketId) {
    var newVideo = document.createElement("video"),
        id = "other-" + socketId;
    newVideo.setAttribute("class", "bigvideo");
    newVideo.setAttribute("autoplay", "autoplay");
    newVideo.setAttribute("id", id);
    videos.appendChild(newVideo);

    console.log("recv stream");
    rtc.attachStream(stream, id);

    var me = document.getElementById('me');
    me.className = "smallvideo";
  });
  //删除其他用户
  rtc.on('remove_peer', function(socketId) {
    var video = document.getElementById('other-' + socketId);
    if(video){
      video.parentNode.removeChild(video);
    }
      var me = document.getElementById('me');
      me.className = "bigvideo";
  });
  //接收到文字信息
  rtc.on('data_channel_message', function(channel, socketId, message){
      /*
    var p = document.createElement("p");
    p.innerText = socketId + ": " + message;
    */
      newE = document.createElement("div");
      newE.className = "receiver";
      newE.innerHTML = "<span class=\"rarrow\"></span>"+replaceURLToLink(message);
      msgs.appendChild(newE);
      msgs.scrollTop = msgs.scrollHeight;
  });

  //
  rtc.on('data_channel_opened', function(){
	  if(witinfo != null){
		  rtc.broadcast("医生，我感觉不舒服，下面是我的资料地址，求助");
		  rtc.broadcast("http://wit120.nollec.com/drawECG.php?time="+witinfo);
	  }
  });
  rtc.on('get_witinfo', function(data){
	  console.log(data);
	  witinfo = data;
	  //rtc.broadcast("http://wit120.nollec.com:81/drawECG.php?time="+witinfo);
	  document.getElementById("msgIpt").value="http://wit120.nollec.com/drawECG.php?time="+witinfo;
	  document.getElementById("sendBtn").click();
  });
  //连接WebSocket服务器
  rtc.connect("ws:" + window.location.href.substring(window.location.protocol.length).split('#')[0], window.location.hash.slice(1));
</script>
</html>
